<template>
  <div class="com-container">
    <div class="com-chart" ref="type_ref"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      chartInstance: null
    }
  },
  destroyed () {
    window.removeEventListener('resize', this.updataChart)
  },
  mounted () {
    this.initChart()
    this.updataChart()
    window.addEventListener('resize', this.updataChart)
    this.updataChart()
  },
  methods: {
    initChart () {
      this.chartInstance = this.$echarts.init(this.$refs.type_ref)
    },
    updataChart () {
      const option = {
        backgroundColor: '#F5F5F5',
        title: {
          text: '非遗项目类型分布',
          subtext: '数据来源：中国非物质文化遗产网',
          x: 'center',
          y: '3%',
          textStyle: {
            fontFamily: 'sans-serif',
            fontSize: 22,
            fontWeight: 'normal'
          },
          subtextStyle: {
            color: '#646464',
            fontFamily: 'sans-serif',
            fontSize: 16,
            fontWeight: 'normal'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 10,
          top: 'center',
          data: ['民间文学', '传统音乐', '传统舞蹈', '传统戏剧', '曲艺', '传统体育、游艺与杂技', '传统美术', '传统技艺', '传统医药', '民俗']
        },
        series: [
          {
            name: '项目数量',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'outside',
              formatter: '{b}: {c}'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '18',
                fontWeight: 'bold'
              }
            },
            data: [
              {value: 125, name: '民间文学'},
              {value: 185, name: '传统音乐'},
              {value: 156, name: '传统舞蹈'},
              {value: 142, name: '传统戏剧'},
              {value: 138, name: '曲艺'},
              {value: 124, name: '传统体育、游艺与杂技'},
              {value: 172, name: '传统美术'},
              {value: 287, name: '传统技艺'},
              {value: 98, name: '传统医药'},
              {value: 223, name: '民俗'}
            ]
          }
        ]
      }
      this.chartInstance.setOption(option)
      this.chartInstance.resize()
    }
  }
}
</script>

<style>
</style> 